<template>
    <div class="search">
        <div class="searchbar">
            <button class="searchicon">
                <i class="fa fa-search"></i>
            </button>
            <input type="text" v-model="keyword">
        </div>
        <div class="queriedmovies">
            <p>电影/电视剧/综艺</p>
        </div>
        <div class="movienews" v-for="item in filpersons" :key="item.id">
            <div class="picture">
                <img :src="item.pic">
            </div>
            <div class="program">
                <p>{{item.num}}</p>
                <p>{{item.moviename}}</p>
                <p>剧情，喜剧，犯罪</p>
                <p>2020-6-30</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Search',
        data() {
            return {
                wellreceived:[],
                keyword: '',
            }
        },
        methods: {
            getNowPlayData() {
                var that = this;
                axios.get('/mock/nowPlayData.json')
                .then(function(response) {
                    console.log(response);
                    if(response.status == 200) {
                        if(response.data && response.data.wellreceived) {
                            that.wellreceived = response.data.wellreceived
                        }
                    }
                })
                .catch(function(error) {
                    console.log(error);
                })
            }
        },
        created() {
            this.getNowPlayData();
        },
        computed: {
            filpersons() {
                return this.wellreceived.filter((item) => {
                    return item.moviename.indexOf(this.keyword) !== -1
                })
            }
        },
    }
</script>

<style scoped>
    .search {
        padding-bottom: 50px;
    }

    .searchbar {
        width: 100%;
        height: 40px;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
    }

    .searchicon {
        width: 30px;
        height: 26px;
        background-color: white;
        margin-top: 6px;
        border: 1px solid #ccc;
        border-right: 0;
        border-radius: 3px 0 0 3px;
    }

    .searchicon i {
        margin-left: 6px;
    }

    .searchbar input {
        width: 85%;
        height: 24px;
        margin-top: 6px;
        border: 1px solid #ccc;
        border-left: 0;
        border-radius: 0 3px 3px 0;
        text-indent: 5px
    }

    .queriedmovies {
        width: 100%;
    }

    .queriedmovies p {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #666;
        margin: 0 auto;
        text-indent: 3%;
        border-bottom: 1px solid #ccc;
    }

    .movienews {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        border-bottom: 1px dashed #ccc;
    }

    .picture {
        width: 16%;
    }

    .picture img {
        width: 100%;
    }

    .program {
        width: 70%;
    }

    .program p {
        font-size: 12px;
        margin-bottom: 5px;
    }
    
    .program p:first-child {
        font-size: 16px;
        color: orange;
        float: right;
    }

    .program p:nth-child(2) {
        font-size: 20px;
    }

    
</style>